<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <h1>{{name}}</h1>
    <div class="task">
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>链接</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in task_arr" :key="item.id" v-color="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.url}}</td>
                    <td>{{item.sold}}</td>
                    <td><button @click="del(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <button @click="newaddShow = true">新增</button>
        <div class="add_box" v-show="newaddShow">
            名称: <input class="add_box_name" v-model="newitem.name" type="text" placeholder="请输入名称"><br>
            链接: <input class="add_box_url" v-model="newitem.url" type="text" placeholder="请输入网站链接"><br>
            描述: <input class="add_box_sold" v-model="newitem.sold" type="text" placeholder="请对此描述"><br>
            <button @click="save()">保存</button>
            <button @click="newaddShow=false" v-model="newaddShow">取消</button>
        </div>
    </div>
</div>
<script>
    Vue.directive('color', function (ele, obj) {
        if (obj.value % 2 == 0) {
            ele.style.backgroundColor = 'red'
        } else {
            ele.style.backgroundColor = 'yellow'
        }
    })
    new Vue({
        el: '#app',
        data: {
            name: '友情链接',
            task_arr: [{
                id: 0,
                name: '哔哩哔哩',
                url: 'http://www.bilibili.com/',
                sold: '哔哩哔哩官网'
            },
            {
                id: 1,
                name: '今日头条',
                url: 'http://www.toutiao.com/',
                sold: '今日头条:热榜新闻'
            },
            {
                id: 2,
                name: '百度',
                url: 'http://www.baidu.com/',
                sold: '百度搜索'
            },
            {
                id: 3,
                name: '新浪微博',
                url: 'http://www.weibo.com/',
                sold: '微博之夜'
            },
            {
                id: 4,
                name: '腾讯网',
                url: 'http://www.qq.com/',
                sold: '腾讯网tengxun'
            },],
            newitem: {
                name: '',
                url: '',
                sold: ''
            },
            newaddShow: false//添加框显示隐藏
        },
        methods: {
            del(id) {
                this.task_arr = this.task_arr.filter(item => item.id !== id);
                return
            },
            save() {
                if (!this.newitem.name || !this.newitem.url) {
                    alert('名称或链接不能为空,请重新输入')
                }
                else {
                    this.task_arr.push({
                        id: this.task_arr.length,
                        name: this.newitem.name,
                        url: this.newitem.url,
                        sold: this.newitem.sold
                    })
                }
                this.newitem = { name: '', url: '', sold: '' };
                this.showAddBox = false;

            }
        }
    })
</script>